<template>
  <v-container fluid>
    <v-slide-y-transition mode="out-in">
      <v-layout column align-center>
        <img src="@/assets/logo.png" alt="Vuetify.js" class="mb-5"/>
        <v-subheader class="pa-0">宝宝该如何称呼你呢?</v-subheader>
        <v-autocomplete
          v-model="title"
          :hint="''"
          :items="titles"
          :readonly="false"
          :label="`选择或输入一个称呼`"
          persistent-hint
          prepend-icon="mdi-city"
        >
          <v-slide-x-reverse-transition
            slot="append-outer"
            mode="out-in"
          >

          </v-slide-x-reverse-transition>
        </v-autocomplete>
        <v-btn round color="primary" class="text-xs-center" @click="startGame" :disabled="title === ''" dark>开始</v-btn>
      </v-layout>
    </v-slide-y-transition>
  </v-container>
</template>

<script>
 export default {
    name: 'Home',
    data() {
      return {
        title:"",
        titles:["叔叔","阿姨","爸爸","妈妈","爷爷","奶奶","外公","外婆"]
      }
    },
    created() {
      // this.axios.get('/api/next')
      //     .then(function(response) {
      //       console.log("初始化 " + response.data);
      //     })
      //     .catch(function(error) {
      //       console.log("error:" + error);
      //     });
    },
    methods:{
      startGame() {
        const title = this.title;
        const self = this;
        this.axios.post('/api/init', {title:self.title})
          .then(function(response) {
            console.log("开始 " + title);
            self.$router.push({name:"game"});
          })
          .catch(function(error) {
            console.log("error:" + error);
          });
      }
    }
  } 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
